<template>
  <div>
    <a-card :bordered="false" :bodyStyle="{ padding: '16px', height: '100%' }">
      <div class="search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="10" :sm="24">
              <a-form-item label="所在班级:">
                <a-select
                  placeholder="请选择班级"
                  allowClear
                  style="width:400px;"
                  v-model="queryParam.project_id"
                >
                  <a-select-option
                    v-for="(item,index) in classlist"
                    :key="index"
                    :value="item.id"
                  >{{item.name}}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :md="10" :sm="24">
              <a-form-item label="档案类型">
                <a-select
                  placeholder="请选择档案类型"
                  allowClear
                  style="width:400px;"
                  v-model="queryParam.type"
                >
                  <a-select-option
                    v-for="(item,index) in growthlist"
                    :key="index"
                    :value="item.name"
                  >{{item.name}}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <div style="padding:15px 0 0 0;">
          <a-button type="primary" @click="visible=true">新增班级档案</a-button>
        </div>
      </div>
      <div style="margin-top:15px;">
        <s-table
          ref="table"
          :columns="columns"
          :data="loadData"
          showPagination="auto"
          class="user_management_table"
          :pagination="pagination"
          :scroll="{ x: 1500}"
        >
          <span slot="filecontent" slot-scope="text,record">
            <p>
              <a @click="lookInfo(record.id)">{{record.type}}</a>
            </p>
            <span style="margin-right:8px;" v-html="record.text"></span>
            <span v-if="JSON.parse(record.content).arr&&JSON.parse(record.content).arr.length>0">
              <a-icon type="picture" />
            </span>
          </span>
          <div slot="action" slot-scope="text,record">
            <a @click="deletefile(record.id)">删除</a>
          </div>
        </s-table>
      </div>
      <!-- 新增学员档案 -->

      <a-modal
        title="新增成长档案"
        :width="720"
        :visible="visible"
        @ok="handleOk('ruleForm')"
        @cancel="handleCancel"
      >
        <a-form-model
          :model="form"
          :rules="rules"
          :label-col="{span:4}"
          :wrapper-col="{span:16}"
          ref="ruleForm"
        >
          <a-form-model-item label="接收人:">
            <a @click="showClass">
              <span>选择班级:</span>
              <a-icon type="down" />
            </a>
            <div
              v-if="classInfo.length>0"
              style="width:380px;overflow:hidden; height:40px;white-space: nowrap;text-overflow: ellipsis;"
            >
              <span v-for="(item,index) in classInfo" :key="index" style="font-size:14px;">
                {{item.name}}
                <span v-if="index!=classInfo.length-1">,</span>
              </span>
            </div>
            <span v-if="studentInfo.length>0">等{{studentInfo.length}}名学生</span>
          </a-form-model-item>
          <a-form-model-item label="档案类型:" prop="growth_archive_sorts_id">
            <a-select
              placeholder="请选择档案类型"
              allowClear
              style="width:70%;"
              v-model="form.growth_archive_sorts_id"
            >
              <a-select-option
                v-for="(item,index) in growthlist"
                :key="index"
                :value="item.id"
                :disabled="item.is_enable==2"
              >{{item.name}}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="推送给学员:">
            <a-switch :defaultChecked="true" @click="sendClick" />
          </a-form-model-item>

          <a-form-model-item label="内容:" prop="content.text" :wrapper-col="{span:12}">
            <a-input type="textarea" v-model="form.content.text" />
          </a-form-model-item>
          <a-form-model-item label=" " :colon="false">
            <div>
              <uploadimg @btnStartLoading="handlerup" @url="getimgurl"></uploadimg>
            </div>
            <div class="fileListArr" v-if="fileArr.length>0">
              <div class="fileEachOne" v-for="(item,index) in fileArr" :key="index">
                <img :src="item.img" alt v-if="item.img" />
                <video :src="item.mp4" v-if="item.mp4">您的浏览器不支持 video 标签。</video>
                <!--  controls="controls" -->
                <a class="close_" @click="fileArr.splice(index,1)">
                  <a-icon type="close" :style="{ fontSize: '16px' }" />
                </a>
              </div>
            </div>
          </a-form-model-item>
        </a-form-model>
      </a-modal>

      <class-model ref="classM" @reload="classModelReturnData" :studentArr="studentIDs"></class-model>

      <a-modal
        :visible="infoVisible"
        @cancel="infoVisible=false"
        :footer="null"
        title="成长档案详情"
        width="80%"
      >
        <div class="growthInfo">
          <div class="infomation">
            <div class="title">{{growthInfo.type}}</div>
            <div class="className">
              <img
                src="~@/assets/student_tags_growth.png"
                style="margin-right:5px;position:relative;top:-4px;"
                height="18px;"
              />
              <span
                style="overflow: hidden; max-width:500px;text-overflow:ellipsis; white-space:nowrap;"
                :title="growthInfo.project"
              >{{growthInfo.project}}</span>
            </div>
            <div class="studentName_createTime">
              <a-icon type="user" style="color:rgb(204,204,204);margin-right:10px;" />
              {{growthInfo.user_name}}
              <a-icon
                type="history"
                style="color:rgb(204,204,204);margin-right:10px;margin-left:20px;"
              />
              {{growthInfo.created_at}}
            </div>
            <div class="content">
              <div class="text" v-html="growthInfo.content.text">
                 <!-- {{growthInfo.content.text}} -->
                <!-- <a-tooltip placement="top">
                  <template slot="title">{{growthInfo.content.text}}</template>
                  {{growthInfo.content.text}}
                </a-tooltip> -->
              </div>

              <div
                class="content_img_mp4"
                v-for="(item,index) in growthInfo.content.arr"
                :key="index"
              >
                <div class="imgs">
                  <img :src="item.img" :alt="item.explain" v-if="item.img" />
                  <video
                    :src="item.mp4"
                    v-if="item.mp4"
                    :alt="item.explain"
                    controls
                  >你的浏览器暂不支持vedio标签</video>
                  <p>{{item.explain}}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="comments">
            <div class="title">互动评论</div>
            <div class="comments_area">
              <div class="user_comments" v-for="(item,index) in growthInfo.comment" :key="index">
                <div class="comments_content">
                  <div class="headImg">
                    <img :src="item.from.avatar.url||item.from.avatar" v-if="item.from.avatar" style="border-radius:50%;"/>
                     <img src="~@/assets/touxiang.svg" v-else style="border-radius:50%;"/>
                  </div>
                  <div class="userInfo">
                    <div class="name">{{item.from.name}}</div>
                    <div class="time">
                      {{item.created_at}}
                      <span
                        class="action"
                        v-if="item.can_del==2"
                        @click="replyComment(item.from.id,item.to_type_text,item.from.name)"
                      >回复</span>
                      <span class="action" v-else @click="delComments(item.id,index)">删除</span>
                    </div>
                    <div class="text" v-if="!item.to">{{item.comment}}</div>

                    <div class="text" v-else>
                      <span v-if="item.to.name">
                        回复
                        <span class="to_name" style="color:#ccc">{{item.to.name}}：</span>
                      </span>
                      {{item.comment}}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="comments_">
              <a-input
                type="textarea"
                :maxLength="200"
                :placeholder="reply.to_id?'回复'+reply.name+'(200字内)':'添加评论(200字内)'"
                :autoSize="{maxRows:2,minRows:2}"
                v-model="reply.comment"
              ></a-input>
              <a-button
                type="primary"
                style="margin-top:10px;margin-right:10px;"
                @click="addComment()"
              >发送</a-button>

              <a-button @click="cancelReply" v-if="reply.to_id">取消</a-button>
            </div>
          </div>
        </div>
      </a-modal>
    </a-card>
  </div>
</template>

<script>
import {
  growthList,
  growthTypeList,
  delGrowth,
  addGrowth,
  getGrowth,
  addComment,
  growthArchives,
  deleteComment
} from '@/api/growthprofile'
import { STable } from '@/components'
import classModel from '@/components/class'
import { studentList } from '@/api/student'
import { classList } from '@/api/class'
import uploadimg from '@/components/uploadIMG_AVI'
export default {
  name: 'studentgrowth',
  components: { STable, classModel, uploadimg },
  data() {
    return {
      pagination:{
        showTotal:total=>`共${total}条数据`,
      },
      isImg: null,
      isvideo: null,
      contentList: [],
      avatarUrl: require('@/assets/touxiang.svg'),
      keywords: undefined,
      growthlist: [],
      classlist: [],
      //表格
      queryParam: {
        school_id: this.$store.state.user.school,
        project_type: 2
      },
      columns: [
        {
          title: '档案类容',
          // dataIndex: 'name',
          width: 350,
          ellipsis: true,
          scopedSlots: { customRender: 'filecontent' }
        },
        {
          title: '接收对象',
          dataIndex: 'project',
          width: 350,
          ellipsis: true
        },
        {
          title: '操作时间',
          dataIndex: 'created_at',
          width: 250
        },
        {
          title: '操作人',
          width: 250,
          dataIndex: 'user_name'
        },
        {
          title: '操作',
          width: 100,
          fixed:'right',
          scopedSlots: { customRender: 'action' }
        }
      ],
      loadData: parameter => {
        return growthList(Object.assign(parameter, this.queryParam, { keywords: this.keywords })).then(res => {
         
          if(res.data.length>0){
            res.data.forEach(item=>{
              item.text=JSON.parse(item.content).text.replace(/\r\n/g,"<br>")
             item.text=JSON.parse(item.content).text.replace(/\n/g,"<br>")
            })
          }
           console.log(res.data,3)
          return res
        })
      },
      //弹窗
      visible: false,

      //选择学员
      name: '',
      visible1: false,
      selectedRowKeys: [], //多选
      columns1: [
        {
          title: '学员名称',
          dataIndex: 'name'
        }
      ],
      tableData: [],
      form: {
        school_id: this.$store.state.user.school,
        project_ids: [],
        project_type: 2,
        growth_archive_sorts_id: undefined,
        is_show: 1,
        content: { text: '' }
      },
      rules: {
        growth_archive_sorts_id: [{ required: true, message: '请选择档案类型', trigger: 'change' }],
        'content.text': [{ required: true, message: '请填写内容', trigger: 'blur' }]
      },
      studentIDs: [],
      studentInfo: [],
      classInfo: [],
      classIDs: [],
      //查看详情
      infoVisible: false,
      growthId: null,
      growthInfo: {
        content: {
          arr: [],
          text: ''
        },
        student_or_shcool: []
      },
      reply: {
        to_id: null,
        to_type: null,
        name: '',
        comment: '',
        project_id: null,
        project_type: 1,
        school_id: this.$store.state.user.school_id
      },
      //上传图片
      fileArr: []
    }
  },
  watch: {
    queryParam: {
      handler(newName, oldName) {
        this.$refs.table.refresh()
      },

      deep: true // 开启深度监听，默认是false
    }
  },
  created() {
    //档案类型数据
    this.getArchiveSorts()
    //所在班级
    classList({ school_id: this.$store.state.user.school, pageSize: 999999999999 })
      .then(res => {
        this.classlist = res.data
      })
      .catch(err => {
        this.$message.error(err.data.message || '班级获取失败')
      })
  },
  methods: {
    //档案类型数据
    getArchiveSorts() {
      growthTypeList({ school_id: this.$store.state.user.school })
        .then(res => {
          this.growthlist = res.data
        })
        .catch(err => {
          this.$message.error(err.data.message || '档案类型获取失败')
        })
    },
    //删除
    deletefile(id) {
      let that = this
      that.$confirm({
        title: '确认',
        content: '是否要删除该成长档案',
        okText: '确认',
        cancelText: '取消',
        onOk() {
          delGrowth(id)
            .then(res => {
              that.$refs.table.refresh()
              that.$message.success('删除成功')
            })
            .catch(err => {
              that.$message.error(err.data.message || '删除失败')
            })
        },
        onCancel() {}
      })
    },
    //弹窗
    handleOk(formName) {
      if (this.classIDs.length == 0) {
        this.$message.warning('请选择要发送的班级！')
        return
      } else {
        this.form.project_ids = this.classIDs
      }
      let sendImg = []
      this.fileArr.forEach(item => {
        sendImg.push(item)
      })

      this.$refs[formName].validate(valid => {
        if (valid) {
          let params = JSON.parse(JSON.stringify(this.form))
          params.content.arr = sendImg
          // params.content.text= params.content.text.replace(/\r\n/g,"<br>");
          // params.content.text= params.content.text.replace(/\n/g,"<br>"); 
          params.content = JSON.stringify(params.content)
          addGrowth(params)
            .then(res => {
              this.visible = false
              this.$refs.table.refresh()
              this.$message.success('提交成功')
              this.form = {
                school_id: this.$store.state.user.school,
                project_ids: [],
                project_type: 2,
                growth_archive_sorts_id: undefined,
                is_show: 1,
                content: { text: '' }
              }

              this.classInfo = []
            })
            .catch(err => {
              this.$message.error(err.data.message || '提交失败请重试')
            })
        } else {
          return false
        }
      })
    },
    handleCancel() {
      this.visible = false
    },
    //选择班级
    showClass() {
      this.$refs.classM.showModel()
    },
    classModelReturnData(e) {
      let arr = []
      e.forEach(val => {
        arr.push(val.id)
      })
      this.classIDs = arr
      this.classInfo = e
    },
    sendClick(e) {
      if (e) {
        this.form.is_show = 1
      } else {
        this.form.is_show = 2
      }
    },
    //查看详情
    lookInfo(e) {
      this.growthId = e
      growthArchives(e)
        .then(res => {
          let params = JSON.parse(JSON.stringify(res))

          this.growthInfo = params
          this.growthInfo.content = JSON.parse(params.content)
          this.growthInfo.content.text=this.growthInfo.content.text.replace(/\r\n/g,"<br>")
          this.growthInfo.content.text=this.growthInfo.content.text.replace(/\n/g,"<br>")
          this.infoVisible = true
        })
        .catch(err => {
          this.$message.error(err.data.message || '获取详情失败，请刷新后重试')
        })
    },
    replyComment(data, type, name) {
      this.reply.to_type = type
      this.reply.to_id = data
      this.reply.name = name
    },
    delComments(e, data) {
      deleteComment(e)
        .then(res => {
          this.lookInfo(this.growthId)
          this.$message.success('删除成功')
        })
        .catch(err => {
          this.$message.success('删除失败~')
        })
    },
    addComment() {
      let params = JSON.parse(JSON.stringify(this.reply))
      params.project_id = this.growthId
      params.school_id = this.$store.state.user.school

      addComment(params)
        .then(res => {
          this.lookInfo(this.growthId)
          this.reply.comment = ''
          this.$message.success('回复/评论成功')
        })
        .catch(err => {
          this.$message.error(err.data.message || '回复/评论失败')
        })
    },
    cancelReply() {
      this.reply.to_type = null
      this.reply.to_id = null
      this.reply.name = null
    },
    //上传图片
    handlerup(e) {
    },

    getimgurl(e, type) {
      let arr = ['video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'video/mov', 'video/mp4']
      if (arr.indexOf(type) !== -1) {
        this.fileArr.push({
          mp4: e,
          explain: ''
        })
        this.btnLoading = false
      } else {
        this.fileArr.push({
          img: e,
          explain: ''
        })
        this.btnLoading = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.growthInfo {
  display: flex;
  .infomation {
    width: 60%;
    height: 458px;
    border-right: 1px solid #e8e8e8;
    overflow-y: auto;
    div{
      margin-top: 10px;
     
    }
    .title {
      margin-top: 0;
      margin-bottom: 10px;
      color: rgba(0, 0, 0, 0.85);
      font-weight: 500;
      font-size: 25px;
    }
    .className {
      color: #565656;
      display: flex;
    }
    .content {
      padding: 0 5px;
      .text{
        width: 100%;
        word-break: break-all;
        // text-overflow: ellipsis;
        // white-space: nowrap;
      }
      .content_img_mp4 {
        display: flex;
        margin: 15px 0;

        .imgs {
          margin-right: 20px;
          width: 50%;
          max-height: 400px;
          overflow: hidden;
          img  {
            width: 100%;
            height: auto;
            max-height: 400px;
          }
          video  {
            width: 100%;
            height: auto;
            max-height: 400px;
          }
        }
      }
    }
  }
  .comments {
    padding: 0 20px;
    width: 40%;
    height: 458px;
    overflow-y: auto;
    .title {
      font-size: 16px;
    }
    .comments_area {
      height: 300px;
      overflow-y: auto;
      margin-bottom: 20px;
      .user_comments {
        padding: 20px;
        .comments_content {
          display: flex;
          .headImg {
            width: 35px;
            height: 35px;
            img {
              width: 100%;
              height: auto;
              overflow: hidden;
            }
          }
          .userInfo {
            margin-left: 10px;
            flex: 1;
            position: relative;
            top: -5px;
            .time {
              font-size: 12px;
              color: #999;
              .action {
                font-size: 14px;
                color: #1890ff;
                margin-left: 5px;
                cursor: pointer;
              }
            }
            .text {
              margin-top: 10px;
              word-break: break-all;
            }
          }
        }
      }
    }
  }
}
.fileListArr {
  display: flex;
  flex-wrap: wrap;
  // border: 1px dashed #e8e8e8;
  // padding: 10px 10px 0;
  .fileEachOne {
    margin-right: 12px;
    margin-bottom: 15px;

    padding: 10px 10px 5px 0px;
    width: 122px;
    height: 122px;
    overflow: hidden;
    position: relative;
    border-radius: 4px;
    .close_ {
      position: absolute;

      right: 0px;
      top: -8px;
      display: none;
    }
    img,
    video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 4px;
    }
  }
  .fileEachOne:hover {
    .close_ {
      display: block;
    }
  }
}
</style>